<template>
  <div class="container">
    <el-form :model="message" :rules="rules" ref="ruleFormRef">
      <el-row :gutter="20">
        <el-col :span="12" :xs="24" :offset="0">
          <el-form-item prop="nickName">
            <el-input v-model="message.nickName" placeholder="昵称" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24" :offset="0">
          <el-form-item prop="email">
            <el-input v-model="message.email" placeholder="邮箱" clearable>
              <template #append>.com</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" :offset="0">
          <el-input v-model="input" placeholder="网址（可选）" clearable class="input-web-address">
            <template #prepend>Http://</template>
          </el-input>
        </el-col>
        <el-col :span="24" :offset="0">
          <el-form-item prop="content">
            <el-input
              v-model="message.content"
              autosize
              type="textarea"
              placeholder="Please input"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24" :offset="0">
          <el-button type="primary" class="btn-commit" @click="commit(this.$refs.ruleFormRef)"
            >提交</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import ElMessage from "element-plus";
export default {
  inject: ["reload"],
  data() {
    return {
      input: "",
      textarea1: "",
      message: {
        nickName: "",
        email: "",
        content: "",
        articleId: "",
      },
      rules: {
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "change",
          },
        ],
        content: [
          {
            required: true,
            message: "请输入评论内容",
            trigger: "change",
          },
        ],
        nickName: [
          {
            required: true,
            message: "请输入评论内容",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    commit(formEl) {
      if (!formEl) return;
      formEl.validate(async (valid) => {
        if (valid) {
          await this.$http
            .post("/api/comments/DoComment", {
              articleId: this.articleId,
              email: this.message.email,
              nickName: this.message.nickName,
              content: this.message.content,
            })
            .then((response) => {
              this.reload();
            })
            .catch((error) => {
              console.log(error);
            });
        } else {
          ElMessage("  this is a message.");
          return false;
        }
      });
    },
  },
  props: {
    articleId: {
      require: true,
      type: String,
    },
  },
};
</script>

<style scoped>
.container {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1rem;
}
.input-web-address {
  margin-bottom: 1rem;
}
.btn-commit {
  display: block;
  margin: 0px auto;
  margin-top: 1rem;
}
</style>
